<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>发票信息</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="../css/frozen.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<section class="ui-tab invoice">
  <ul class="ui-tab-nav ui-border-b">
    <li class="current">开发票</li>
    <li>已开发票</li>
    <li>发票核销</li>
  </ul>
  <ul class="ui-tab-content" style="width:300%">
    <!-- 开发票 -->
    <li class="current">
      <article class="rech-rec-sec">
        <ul class="ui-list ui-border-b">
          <li class="ui-border-t">
            <div class="inv-check">
              <label class="ui-checkbox">
                <input type="checkbox" checked>
              </label>
            </div>
            <div class="rec-tit">
              ￥<p>200.00</p>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
              <p class="ui-nowrap">2016-06-14 08:12:43</p>
            </div>
          </li>
          <li class="ui-border-t">
            <div class="inv-check">
              <label class="ui-checkbox">
                <input type="checkbox">
              </label>
            </div>
            <div class="rec-tit">
              ￥<p>600.00</p>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
              <p class="ui-nowrap">2016-06-14 08:12:43</p>
            </div>
          </li>
          <li class="ui-border-t">
            <div class="inv-check">
              <label class="ui-checkbox">
                <input type="checkbox">
              </label>
            </div>
            <div class="rec-tit">
              ￥<p>600.00</p>
            </div>
            <div class="ui-list-info">
              <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
              <p class="ui-nowrap">2016-06-14 08:12:43</p>
            </div>
          </li>
        </ul>

        <div class="ui-panel ui-panel-simple ui-border-tb inv-bottom">
          <h2><span class="ui-nowrap">发票抬头:四川笑笑虎融资有限公司</span> <span class="ui-panel-title-tips" id="showcomon"><i class="ui-icon-set"></i></span></h2>
        </div>
        <div class="ui-btn-wrap">
          <button type="button" class="ui-btn-lg ui-btn-danger">确定</button>
        </div>
      </article>
    </li>
    <!-- 已开发票 -->
    <li>
      <article class="consum">
        <ul class=" ui-list-pure">
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t ls">流水</a>
          </li>
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t ls">流水</a>
          </li>
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t ls">流水</a>
          </li>

        </ul>
      </article>
    </li>
    <!-- 发票核销 -->
    <li>
      <article class="consum">
        <ul class="ui-list-pure">
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t xh">发票核销</a>
          </li>
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t xh">发票核销</a>
          </li>
          <li class="ui-border-radius">
            <div class="consun-content">
              <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
              <p>发票抬头：北京昂沁科技有限公司</p>
            </div>
            <a href="javascript:" class="consum-btn ui-border-t xh">发票核销</a>
          </li>

        </ul>
      </article>
    </li>
  </ul>
</section>

<!-- 选择发票抬头 -->
<div class="comon-pop">
  <div class="comon-scroll">
    <div class="addprompt">
      <a href="javascript:" id="addremind"><i class="addblue"></i>新增发票抬头</a>
    </div>

    <ul class="ui-list ui-list-text ui-border-b">
      <li class="ui-border-t">
        <div class="ui-list-info">
          <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-reddot ui-reddot-static"></div>
      </li>
      <li class="ui-border-t">
        <div class="ui-list-info">
          <h4 class="ui-nowrap">北京昂沁科技</h4>
        </div>
        <div class="ui-reddot-static"></div>
      </li>
      <li class="ui-border-t">
        <div class="ui-list-info">
          <h4 class="ui-nowrap">北京昂沁科技</h4>
        </div>
        <div class="ui-reddot-static"></div>
      </li>

    </ul>
  </div>
</div>

<!-- 添加发票抬头 -->
<div class="ui-dialog log1">
  <div class="ui-dialog-cnt">
    <div class="ui-dialog-bd no-w">
      <div class="ui-form-item ui-form-item-pure ui-border ui-border-radius">
        <input type="text" placeholder="添加发票抬头">
      </div>
    </div>
    <div class="ui-dialog-ft ui-btn-group">
      <button type="button" data-role="button" class="select">关闭</button>
      <button type="button" data-role="button" class="select">添加</button>
    </div>
  </div>
</div>

<!-- 发票核销 -->
<div class="pop" id="fpxh">
  <div class="pop-content">
    <div class="pop-mask"></div>
    <div class="pop-section">
      <div class="pop-box">

        <div class="pop-c-header text-center">发票核销 <span class="pop-close">&times;</span></div>
        <div class="pop-c-content">

          <div class="ui-form user-i-content invoice-form">
            <div class="ui-form-item ui-border-b">
              <label>发票金额</label>
              <input type="tel" placeholder="发票金额">
            </div>
            <div class="ui-form-item ui-border-b">
              <label>发票抬头</label>
              <input type="text" value="北京是对方即可" readonly>
            </div>
            <div class="ui-form-item ui-border-b">
              <label>发票号</label>
              <input type="text" value="te132135441" placeholder="发票号">
            </div>
            <div class="ui-form-item ui-border-b">
              <label>核销密码</label>
              <input type="password" placeholder="核销密码">
            </div>
            <div class="ui-form-item ui-border-b">
              <label>开票人</label>
              <input type="text" placeholder="开票人" value="撒的发">
            </div>
            <div class="ui-btn-wrap">
              <button type="button" class="ui-btn-lg ui-btn-danger">确定</button>
            </div>
          </div>

          <div class="rech-rec-sec">
            <section class="ui-panel ui-panel-simple ui-border-t">
              <h2 class="ui-arrowlink"><span><i class="i-logo"></i> 发票明细</span></h2>
            </section>
            <ul class="ui-list ui-border-t">
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>200.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>600.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>600.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
            </ul>
          </div>
        </div><!-- pop-c-content -->

      </div>
    </div>
  </div>
</div>

<!-- 发票流水 -->
<div class="pop" id="fpls">
  <div class="pop-content">
    <div class="pop-mask"></div>
    <div class="pop-section">
      <div class="pop-box">

        <div class="pop-c-header text-center">发票核销 <span class="pop-close">&times;</span></div>
        <div class="pop-c-content">

          <div class="sun-content">
            <h4 class="lit-size"><i class="i-logo"></i> 2016-06-15  12:10 <span class="pull-right">开票金额：160元</span></h4>
            <p>发票抬头：北京昂沁科技有限公司</p>
          </div>

          <div class="rech-rec-sec">
            <ul class="ui-list ui-border-t">
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>200.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>600.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
              <li class="ui-border-t">
                <div class="rec-tit">
                  ￥<p>600.00</p>
                </div>
                <div class="ui-list-info">
                  <h4 class="ui-nowrap">优惠20元   实际付款188元</h4>
                  <p class="ui-nowrap">2016-06-14 08:12:43</p>
                </div>
              </li>
            </ul>
          </div>
        </div><!-- pop-c-content -->

      </div>
    </div>
  </div>
</div>

<script src="../lib/zepto.min.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/main.js"></script>
<script>
  (function() {
    /**
     * tab
     */
    var tab = new fz.Scroll('.ui-tab', {
      role: 'tab',
    });



    // 修改发票抬头
    $('#showcomon').on('tap',function (e) {
      e.preventDefault();
      $('.comon-pop').show();
    });

    // 弹出添加框
    $("#addremind").tap(function(){
      var dia=$(".log1").dialog("show");
      dia.on("dialog:action",function(e){
        console.log(e.index);
        if(e.index){
          window.location.href = '';
        }
      });
    });

    // 选择发票抬头
    $('.comon-pop li').click(function () {
      window.location.href = 'invoice_detail.html';
    });

    // 点击发票核销 弹出框
    $('.xh').tap(function (e) {
      e.preventDefault();
      $('#fpxh').show();
    });

    // 点击发票流水 弹出框
    $('.ls').tap(function (e) {
      e.preventDefault();
      $('#fpls').show();
    });

    $('.pop-close,.pop-mask').tap(function (e) {
      e.preventDefault();
      $('#fpxh').hide();
      $('#fpls').hide();
    });

  })();
</script>
</body>
</html>